@import "./config.scss";

//宽高
@mixin wh100($width: 100%, $height: 100%){
	width: $width;
	height: $height;
}

//定位遮罩
@mixin fixed-mask{
	position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, .6);
}

//定位上下左右居中
@mixin absolute($top: 50%) {  
	position: absolute;
	top: $top;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin ellipse($direction: rtl) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: $direction;
}

// 背景图片地址和大小
@mixin bg-img($url) { 
	background-image: url($url);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

//字体大小，颜色
@mixin font-size-color($size, $color){
	font-size: $size;
	color: $color;
}

@mixin clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

// flex
@mixin flex-box($flex-direction: row, $align-items: end-start, $justify-content: space-between) {
	display: flex;
	flex-direction: $flex-direction;
    align-items: $align-items;
    justify-content: $justify-content;
    @content;
}

@mixin flex-center($direction: row) {
	display: flex;
	flex-direction: $direction;
    align-items: center;
    justify-content: center;
    @content;
}

@mixin flex-hidden() {
	display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

@mixin flex-auto() {
    flex: 1;
	overflow-x: hidden;
    overflow-y: auto;
    @content;
}

@mixin user-select($user-select: none) {
    user-select: $user-select;
}

@mixin pointer-events($pointer-events: none) {
    pointer-events: $pointer-events;
}

@mixin outline($outline: none) {
    outline: $outline;
}

@mixin cursor($cursor: pointer) {
    cursor: $cursor;
}

@mixin box-shadow() {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

@mixin block($block) {
    $B: $namespace+'-'+$block;
    .#{$B}{
        @content;
    }
}

@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}
@mixin modifier($modifier) {
    @at-root {
        #{&+$modifier-separator+$modifier} {
            @content;
        }
    }
}
@mixin element($element) {
    @at-root {
        #{&+$element-separator+$element} {
            @content;
        }
    }
}

